<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="Hexo Theme Keep">
    <meta name="description" content="Hexo Theme Keep">
    <meta name="author" content="cheng5.du">
    
    <title>
        
            浅话事件循环（Event Loop） |
        
        cheng5.du
    </title>
    
<link rel="stylesheet" href="/css/style.css">

    <link rel="shortcut icon" href="/images/avatar.jpeg">
    
<link rel="stylesheet" href="/css/font-awesome.min.css">

    <script id="hexo-configurations">
    let KEEP = window.KEEP || {};
    KEEP.hexo_config = {"hostname":"example.com","root":"/","language":"zh-CN"};
    KEEP.theme_config = {"toc":{"enable":false,"number":false,"expand_all":false,"init_open":false},"style":{"primary_color":"#0066CC","avatar":"/images/avatar.jpeg","favicon":"/images/avatar.jpeg","article_img_align":"left","left_side_width":"260px","content_max_width":"920px","hover":{"shadow":false,"scale":false},"first_screen":{"enable":true,"background_img":"/images/bg.svg","description":"人生海海，来日方长。"},"scroll":{"progress_bar":{"enable":false},"percent":{"enable":false}}},"local_search":{"enable":false,"preload":false},"code_copy":{"enable":false,"style":"default"},"pjax":{"enable":false},"lazyload":{"enable":false},"version":"3.4.5"};
    KEEP.language_ago = {"second":"%s 秒前","minute":"%s 分钟前","hour":"%s 小时前","day":"%s 天前","week":"%s 周前","month":"%s 个月前","year":"%s 年前"};
  </script>
<meta name="generator" content="Hexo 6.1.0"></head>


<body>
<div class="progress-bar-container">
    

    
</div>


<main class="page-container">

    

    <div class="page-main-content">

        <div class="page-main-content-top">
            <header class="header-wrapper">

    <div class="header-content">
        <div class="left">
            
            <a class="logo-title" href="/">
                cheng5.du
            </a>
        </div>

        <div class="right">
            <div class="pc">
                <ul class="menu-list">
                    
                        <li class="menu-item">
                            <a class=""
                               href="/"
                            >
                                首页
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/archives"
                            >
                                归档
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/categories"
                            >
                                分类
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/tags"
                            >
                                标签
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/netease"
                            >
                                网抑云
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/about"
                            >
                                关于我
                            </a>
                        </li>
                    
                    
                </ul>
            </div>
            <div class="mobile">
                
                <div class="icon-item menu-bar">
                    <div class="menu-bar-middle"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="header-drawer">
        <ul class="drawer-menu-list">
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/">首页</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/archives">归档</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/categories">分类</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/tags">标签</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/netease">网抑云</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/about">关于我</a>
                </li>
            
        </ul>
    </div>

    <div class="window-mask"></div>

</header>


        </div>

        <div class="page-main-content-middle">

            <div class="main-content">

                
                    <div class="fade-in-down-animation">
    <div class="article-content-container">

        <div class="article-title">
            <span class="title-hover-animation">浅话事件循环（Event Loop）</span>
        </div>

        
            <div class="article-header">
                <div class="avatar">
                    <img src="/images/avatar.jpeg">
                </div>
                <div class="info">
                    <div class="author">
                        <span class="name">cheng5.du</span>
                        
                    </div>
                    <div class="meta-info">
                        <div class="article-meta-info">
    <span class="article-date article-meta-item">
        <i class="fas fa-edit"></i>&nbsp;
        <span class="pc">2021-04-08 23:48:12</span>
        <span class="mobile">2021-04-08 23:48</span>
    </span>
    
        <span class="article-categories article-meta-item">
            <i class="fas fa-folder"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    
    
        <span class="article-tags article-meta-item">
            <i class="fas fa-tags"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/tags/JavaScript/">JavaScript</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    

    
    
    
    
</div>

                    </div>
                </div>
            </div>
        

        <div class="article-content markdown-body">
            <h2 id="概述"><a href="#概述" class="headerlink" title="概述"></a>概述</h2><p>首先，我们需要明确：</p>
<ol>
<li>JS是单线程（single threaded）运行的（所以无论同步还是异步都需要排队）。</li>
<li>异步(asynchronous)要基于回调（callback）来实现。</li>
<li>event loop就是异步回调的实现原理。</li>
</ol>
<p>🚨 Notice：进程是 cpu 资源分配的最小单位（是能拥有资源和独立运行的最小单位）;线程是 cpu 调度的最小单位（线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程）。</p>
<h3 id="一些概念"><a href="#一些概念" class="headerlink" title="一些概念"></a>一些概念</h3><h4 id="JS是单线程执行（JS引擎线程）"><a href="#JS是单线程执行（JS引擎线程）" class="headerlink" title="JS是单线程执行（JS引擎线程）"></a>JS是单线程执行（JS引擎线程）</h4><blockquote>
<p>在浏览器环境中，有JS 引擎线程和渲染线程，且两个线程互斥。Node环境中，只有JS 线程。</p>
</blockquote>
<h5 id="主线程、JS引擎线程、渲染线程"><a href="#主线程、JS引擎线程、渲染线程" class="headerlink" title="主线程、JS引擎线程、渲染线程"></a>主线程、JS引擎线程、渲染线程</h5><p>一般浏览器中，页面渲染和 JS 执行虽然是2个工作，用不同的模块和引擎去做，但是他们都是放在一个叫做主线程（Main Thread）的线程里执行的。</p>
<p>主线程中即可以执行 JS ，也可以执行渲染工作，还可以执行其他工作，但是由于是主线程是单线程，所以各个工作不能同时执行，只能按照一定的先后次序执行。</p>
<p>如果在你的 JS 代码执行的过程中，使得文档或者样式发生了改变，那么在你的这串 JS 代码执行完成后，才会去触发渲染，使得页面呈现新的效果。</p>
<p>🚨 Notice：每一个网页有一个主线程，来执行他的JS、渲染。但是浏览器是多线程的，它可以同时开多个网页，因此对于包含多个标签页的浏览器来说，它是可以开多个主线程的。不同标签页里不同主线程是平行的。浏览器中每个网页的 JS 都靠同一个 JS 引擎来执行，但是他们的主线程是分离的，执行上下文也是分离的。</p>
<h4 id="宿主"><a href="#宿主" class="headerlink" title="宿主"></a>宿主</h4><p>JS运行时的环境，一般指的是浏览器或者Node。</p>
<h4 id="执行栈"><a href="#执行栈" class="headerlink" title="执行栈"></a>执行栈</h4><ol>
<li>JS 代码在运行时都是在执行上下文中进行的。<ul>
<li>全局执行上下文，默认的，在浏览器中是 window 对象，并且 this 在非严格模式下指向它。</li>
<li>函数执行上下文，JS 的函数每当被调用时会创建一个上下文。</li>
<li>Eval 执行上下文，eval 函数会产生自己的上下文。</li>
</ul>
</li>
<li>栈，是一种数据结构，具有先进后出的原则。</li>
</ol>
<p>那么，执行栈其实就是push&#x2F;pop执行上下文的数据结构。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="title function_">bar</span>()</span><br><span class="line">&#125;</span><br><span class="line">funciton <span class="title function_">bar</span>(<span class="params"></span>) &#123;&#125;</span><br><span class="line"><span class="title function_">foo</span>()</span><br></pre></td></tr></table></figure>

<p><img src="https://cdn.jsdelivr.net/gh/superFatDu/blogPics@main/20210508/ec.3d4vz5mhgrw0.png" alt="ec"></p>
<h2 id="Event-Loop"><a href="#Event-Loop" class="headerlink" title="Event Loop"></a>Event Loop</h2><p><img src="https://cdn.jsdelivr.net/gh/superFatDu/blogPics@main/20210507/eventloop.6zm0jk6zu140.svg" alt="EVENT LOOP1"></p>
<h3 id="Event-Loop执行顺序（以如上代码为例）"><a href="#Event-Loop执行顺序（以如上代码为例）" class="headerlink" title="Event Loop执行顺序（以如上代码为例）"></a>Event Loop执行顺序（以如上代码为例）</h3><p><img src="https://cdn.jsdelivr.net/gh/superFatDu/blogPics@main/20210508/eventloopintro.4d2pe0a0z800.png" alt="eventloopintro"></p>
<p>🚨 Notice：输出undefined的原因是：同步函数在调用栈中都执行完毕弹出，且最后一个函数没有返回值时，默认返回undefined。</p>
<ol>
<li>JS引擎会检查整段代码的语法错误，如果没有错误，就从头开始深度解析</li>
<li>首先遇到setTimeout函数调用，把它推入执行栈顶</li>
<li>解析函数体，发现setTimeout函数是Web API的一种，因此就把它分发到Web API模块然后推出栈</li>
<li>因为定时器设置了0ms延迟，因此Web API模块立即把它的匿名回调函数推入到回调函数函数队列。事件循环检测执行栈是否是空闲，但是当前栈并不空闲，因为还有其他的代码。</li>
<li>当setTimeout函数一被分发到Web API模块，JS引擎发现了两个函数声明，把它们存储在堆内存里，然后遇到了sayHi函数的调用，就把它推入了栈顶</li>
<li>sayHi函数调用了console.log函数，因此console.log就被推入了栈顶</li>
<li>JS引擎开始解析console.log的函数体，它接收了一个消息去打印‘Hi’，然后被弹出栈</li>
<li>JS引擎返回到函数sayHi的执行，遇到函数的结束符号}之后，把它弹出栈</li>
<li>sayHi函数一出栈，紧接着sayBye函数被调用，它就被推入栈顶，被解析，调用console.log，把console.log推入栈顶，打印一条消息，弹出栈。然后sayBye函数弹出栈</li>
<li>事件循环检测到执行栈终于空闲了，通知回调队列，然后回调队列把其中的匿名函数推入执行栈</li>
<li>匿名函数（就是setTimeout的回调函数）被解析、调用console.log，console.log推入栈顶</li>
<li>console.log执行完毕、再出栈</li>
<li>匿名函数再被推出栈，程序结束。</li>
</ol>
<h3 id="宏任务和微任务"><a href="#宏任务和微任务" class="headerlink" title="宏任务和微任务"></a>宏任务和微任务</h3><blockquote>
<p>ES6 规范中，microtask 称为 jobs，macrotask 称为 task宏任务是由宿主发起的，而微任务由JavaScript自身发起。</p>
</blockquote>
<p>执行栈清空 &#x3D;&gt; 执行微任务 &#x3D;&gt; 尝试DOM渲染 &#x3D;&gt; 执行宏任务</p>
<p><img src="https://cdn.jsdelivr.net/gh/superFatDu/blogPics@main/20210508/eventloop2.7gj42zx2oo40.webp" alt="EVENT LOOP"></p>
<h4 id="宏任务（macrotask）和-微任务（microtask）区别"><a href="#宏任务（macrotask）和-微任务（microtask）区别" class="headerlink" title="宏任务（macrotask）和 微任务（microtask）区别"></a>宏任务（macrotask）和 微任务（microtask）区别</h4><p><img src="https://cdn.jsdelivr.net/gh/superFatDu/blogPics@main/20210511/hongweirenwu1.3r3clo6ocra0.svg" alt="diff"></p>
<h4 id="执行步骤"><a href="#执行步骤" class="headerlink" title="执行步骤"></a>执行步骤</h4><ol>
<li>执行宏任务（script(整体代码)）。</li>
<li>有同步任务直接执行，遇到异步任务划分为宏任务和微任务。</li>
<li>然后有微任务执行微任务，反之执行宏任务（微任务的优先级大于宏任务）。</li>
</ol>
<p><img src="https://cdn.jsdelivr.net/gh/superFatDu/blogPics@main/20210508/%E5%AE%8F%E4%BB%BB%E5%8A%A1%E5%BE%AE%E4%BB%BB%E5%8A%A1.3edhq6w4i7k0.jfif" alt="执行步骤"></p>
<h4 id="执行顺序"><a href="#执行顺序" class="headerlink" title="执行顺序"></a>执行顺序</h4><p>宏任务（script(整体代码)）&gt; 微任务 &gt; 宏任务</p>

        </div>

        

        
            <ul class="post-tags-box">
                
                    <li class="tag-item">
                        <a href="/tags/JavaScript/">#JavaScript</a>&nbsp;
                    </li>
                
            </ul>
        

        
            <div class="article-nav">
                
                    <div class="article-prev">
                        <a class="prev"
                           rel="prev"
                           href="/2021/04/09/%E6%B5%85%E8%AF%9DJavaScript%E5%86%85%E5%AD%98%E5%88%86%E9%85%8D/"
                        >
                            <span class="left arrow-icon flex-center">
                              <i class="fas fa-chevron-left"></i>
                            </span>
                            <span class="title flex-center">
                                <span class="post-nav-title-item">浅话JavaScript内存分配</span>
                                <span class="post-nav-item">上一篇</span>
                            </span>
                        </a>
                    </div>
                
                
                    <div class="article-next">
                        <a class="next"
                           rel="next"
                           href="/2021/04/06/%E9%98%B2%E6%8A%96%E4%B8%8E%E8%8A%82%E6%B5%81/"
                        >
                            <span class="title flex-center">
                                <span class="post-nav-title-item">防抖与节流</span>
                                <span class="post-nav-item">下一篇</span>
                            </span>
                            <span class="right arrow-icon flex-center">
                              <i class="fas fa-chevron-right"></i>
                            </span>
                        </a>
                    </div>
                
            </div>
        

        
    </div>
</div>


                
            </div>

        </div>

        <div class="page-main-content-bottom">
            <footer class="footer">
    <div class="info-container">
        <div class="copyright-info info-item">
            &copy;
            
              <span>2020</span>
              -
            
            2023&nbsp;<i class="fas fa-heart icon-animate"></i>&nbsp;<a href="/">cheng5.du</a>
        </div>
        
        <div class="theme-info info-item">
            Powered by <a target="_blank" href="https://hexo.io">Hexo</a>&nbsp;|&nbsp;Theme&nbsp;<a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.4.5</a>
        </div>
        
        
    </div>
</footer>

        </div>
    </div>

    
        <div class="post-tools">
            <div class="post-tools-container">
    <ul class="tools-list">
        <!-- TOC aside toggle -->
        

        <!-- go comment -->
        
    </ul>
</div>

        </div>
    

    <div class="right-bottom-side-tools">
        <div class="side-tools-container">
    <ul class="side-tools-list">
        <li class="tools-item tool-font-adjust-plus flex-center">
            <i class="fas fa-search-plus"></i>
        </li>

        <li class="tools-item tool-font-adjust-minus flex-center">
            <i class="fas fa-search-minus"></i>
        </li>

        <li class="tools-item tool-expand-width flex-center">
            <i class="fas fa-arrows-alt-h"></i>
        </li>

        <li class="tools-item tool-dark-light-toggle flex-center">
            <i class="fas fa-moon"></i>
        </li>

        <!-- rss -->
        

        
            <li class="tools-item tool-scroll-to-top flex-center">
                <i class="fas fa-arrow-up"></i>
            </li>
        

        <li class="tools-item tool-scroll-to-bottom flex-center">
            <i class="fas fa-arrow-down"></i>
        </li>
    </ul>

    <ul class="exposed-tools-list">
        <li class="tools-item tool-toggle-show flex-center">
            <i class="fas fa-cog fa-spin"></i>
        </li>
        
    </ul>
</div>

    </div>

    

    <div class="image-viewer-container">
    <img src="">
</div>


    

</main>




<script src="/js/utils.js"></script>

<script src="/js/main.js"></script>

<script src="/js/header-shrink.js"></script>

<script src="/js/back2top.js"></script>

<script src="/js/dark-light-toggle.js"></script>








<div class="post-scripts">
    
</div>



</body>
</html>
